<template>
  <div class="management-system">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-content">
        <div class="logo">校园外卖配送管理系统</div>
        <div class="user-info">
          <el-dropdown @command="handleUserCommand">
            <div class="el-dropdown-link">
              <el-icon><UserFilled /></el-icon>
              <span style="margin: 0 8px;">admin</span>
              <el-icon><ArrowDown /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                <el-dropdown-item command="settings">设置</el-dropdown-item>
                <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <!-- 主体内容 -->
    <el-container class="main-content">
      <!-- 侧边栏 -->
      <el-aside class="sidebar" width="200px">
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          @select="handleMenuSelect"
          :router="false"
        >
          <el-menu-item index="/home/dashboard">
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </el-menu-item>

          <el-sub-menu index="/home/user">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/home/user/list">用户列表</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="/home/merchant">
            <template #title>
              <el-icon><Shop /></el-icon>
              <span>商户管理</span>
            </template>
            <el-menu-item index="/home/merchant/list">商户列表</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="/home/product">
            <template #title>
              <el-icon><Goods /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/home/product/list">商品列表</el-menu-item>
            <el-menu-item index="/home/product/category">商品类目</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="/home/order">
            <template #title>
              <el-icon><List /></el-icon>
              <span>订单管理</span>
            </template>
            <el-menu-item index="/home/order/list">订单列表</el-menu-item>
            <el-menu-item index="/home/order/make">下单管理</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="/home/permission">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>权限管理</span>
            </template>
            <el-menu-item index="/home/permission/permission">权限管理</el-menu-item>
            <el-menu-item index="/home/permission/role">角色管理</el-menu-item>
            <el-menu-item index="/home/permission/user">用户管理</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/home/statistics">
            <el-icon><DataAnalysis /></el-icon>
            <span>数据统计</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 页面主要内容 -->
      <el-main class="content">
        <router-view v-slot="{ Component }">
          <template v-if="Component">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </template>
          <template v-else>
            <div class="dashboard">
              <h2>系统概览</h2>
              <el-row :gutter="20">
                <el-col :span="24">
                  <div class="welcome-content">
                    <h2>欢迎使用校园外卖配送管理系统</h2>
                    <p>请选择左侧菜单进行操作</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </template>
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  UserFilled,
  ArrowDown,
  HomeFilled,
  User,
  List,
  DataAnalysis,
  Shop,
  Setting,
  Goods
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 当前激活的菜单项
const activeMenu = ref('/home/dashboard')

const handleMenuSelect = (index) => {
  // 确保使用 router.push 而不是打开新页面
  console.log('Menu selected:', index);
  router.push(index);
}

// 监听路由变化，更新激活的菜单项
watch(
  () => route.path,
  (newPath) => {
    console.log('Route changed:', newPath);
    activeMenu.value = newPath;
  },
  { immediate: true }
)

const handleUserCommand = (command) => {
  switch (command) {
    case 'profile':
      ElMessage.info('查看个人中心')
      break
    case 'settings':
      ElMessage.info('打开设置')
      break
    case 'logout':
      ElMessage.success('退出登录成功')
      router.push('/')
      break
  }
}
</script>

<style scoped lang="scss">
.management-system {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;

  .header {
    background-color: #202225;
    color: white;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 60px;

    .header-content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 18px;
      font-weight: bold;
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;

      .el-dropdown-link {
        display: flex;
        align-items: center;
        cursor: pointer;
      }
    }
  }

  .main-content {
    flex: 1;
    display: flex;
    margin-top: 60px;

    .sidebar {
      background-color: #303133;
      color: white;
      position: fixed;
      top: 60px;
      left: 0;
      bottom: 0;
      overflow-y: auto;
      z-index: 100;
      width: 200px;

      .el-menu {
        border-right: none;
        min-height: 100%;
      }

      .el-menu-item {
        color: black;
        &:hover {
          background-color: #404040;
        }
      }

      .el-submenu__title {
        color: #fff;
        &:hover {
          background-color: #404040;
        }
      }
    }

    .content {
      flex: 1;
      padding: 20px;
      background-color: #f5f7fa;
      margin-left: 200px;
      min-height: calc(100vh - 60px);
      
      .dashboard {
        .welcome-content {
          text-align: center;
          padding: 50px 0;
          
          h2 {
            color: #333;
            margin-bottom: 20px;
          }
          
          p {
            color: #666;
          }
        }
      }
    }
  }
}
</style>